import React, { PureComponent } from 'react';
import { Card } from 'antd';
import { connect } from 'dva';
import url from 'url';
import querystring from 'querystring';
import KXShopLevel from './KXShopLevel';
import { searchTaobaoShop } from '../../../services/tool';
@connect(state => ({

}))

export default class ShopPop extends PureComponent {
  state = {
    shops: []
  }
  componentDidMount() {
    const urlObj = url.parse(this.props.value.shopLink);
    const query = querystring.parse(urlObj.query);
    searchTaobaoShop(query).then(result => {
      const shops = [...this.state.shops];
      const shop = shops.find(item => item.url === result.url);
      if (!shop) {
        shops.push(result);
        this.setState({ shops, shopsLoading: false });
      }
    });
  }
  render() {
    const { shops } = this.state;
    return (
      <div>
        {shops[0] ?
          <Card>
            <p><KXShopLevel levelClasses={shops[0].levelClasses} />好评率：{shops[0].favorableRate}</p>
            {shops[0].openYearsText ? <a href={`//rate.taobao.com/user-rate-${shops[0].encryptedUserId}.htm`}>
              <p style={{width: 'auto', border: '1px solid #fff'}} target="_blank">
                <span style={{ background: 'orange', color: '#fff', border: '1px solid orange' }}>店</span>
                <span style={{ border: '1px solid orange', color: 'orange' }}>{shops[0].openYearsText}</span>
             </p></a> : ''}
            <hr />
            <p>描述：{shops[0].matchDescription}<span style={{ background: 'red', color: '#fff' }}>{shops[0].descriptionCompared.text}</span><span>{shops[0].descriptionCompared.rate}</span></p>
            <p>服务：{shops[0].serviceAttitude}<span style={{ background: 'red', color: '#fff' }}>{shops[0].attitudeCompared.text}</span><span>{shops[0].attitudeCompared.rate}</span></p>
            <p>物流：{shops[0].deliverySpeed}<span style={{ background: 'red', color: '#fff' }}>{shops[0].deliveryCompared.text}</span><span>{shops[0].deliveryCompared.rate}</span></p>
          </Card> : ''
        }
      </div>

    )
  }
}